﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <input type="text" name="group-message" id="group-message-text" placeholder="Type a message" />
        <input type="text" name="group-name" id="group-name" placeholder="Type a group name" />
        <input type="button" id="groupmsg" class="btn" value="Send to Group" />
        <input type="button" id="join-group" class="btn" value="Join Group" />
        <input type="button" id="leave-group" class="btn" value="Leave Group" />
    </div>
    <ul id="messagesList"></ul>
    <!--<script src="lib/jquery/dist/jquery.js"></script>-->
    <script src="js/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .configureLogging(signalR.LogLevel.Information)
            .withUrl("/groupChatHub")
            .build();
        connection.on("Send", function (message) {
            var li = document.createElement("li");
            li.textContent = message;
            document.getElementById("messagesList").appendChild(li);
        });
        document.getElementById("groupmsg").addEventListener("click", async (event) => {
            var groupName = document.getElementById("group-name").value;
            var groupMsg = document.getElementById("group-message-text").value;
            try {
                await connection.invoke("SendMessageToGroup", groupName, groupMsg);
            }
            catch (e) {
                console.error(e.toString());
            }
            event.preventDefault();
        });
        document.getElementById("join-group").addEventListener("click", async (event) => {
            var groupName = document.getElementById("group-name").value;
            try {
                await connection.invoke("AddToGroup", groupName);
            }
            catch (e) {
                console.error(e.toString());
            }
            event.preventDefault();
        });
        document.getElementById("leave-group").addEventListener("click", async (event) => {
            var groupName = document.getElementById("group-name").value;
            try {
                await connection.invoke("RemoveFromGroup", groupName);
            }
            catch (e) {
                console.error(e.toString());
            }
            event.preventDefault();
        });
        // We need an async function in order to use await, but we want this code to run immediately,
        // so we use an "immediately-executed async function"
        (async () => {
            try {
                await connection.start();
            }
            catch (e) {
                console.error(e.toString());
            }
        })();
    </script>
</body>
</html>